<template>
    <view>
        <view class="fixed">
           <!-- #ifdef MP-WEIXIN --> 
           <top-nav :inner-title="title" is-show-back="true" is-fixed="false" :navH="navH" :n="n" is-white="bg-white" opacity="1"></top-nav>
           <!-- #endif -->
            <!--搜索-->
            <view class="search" style="height: 60rpx;">
                <view class="search-item" @click="inputSearch()">
                    <image src="http://juhuijia2.birdback.org/mapi/i/run/search@3x.png"></image>
                    <text>输入商家、商品名称</text>
                </view>
            </view>
            <!--筛选-->
            <view class="menu_tab menu-fixed">
                <view class="condition flex">
                    <view class="menu flex" :class="sort == 1 || sort == 2 ? 'ac':''" v-if="countList.take_out == 1">
                        <view @click="sortEvent(0)" style="text-align: center;">
                            <view class="title flex">外卖 <icon class="arr_down"></icon></view>  
                        </view>
                        <view class="picker_select" v-if="selectSort">
                            <view class="picker_select_column">
                                <view @click="sortEvent(1)" :class="sort==1 ? 'pickered' : ''"><text>综合排序</text>
                                    <icon :class="sort==1 ? 'picker_chosed' : ''"></icon>
                                </view>
                                <view @click="sortEvent(2)" :class="sort==2 ? 'pickered' : ''"><text>销量最高</text>
                                    <icon :class="sort==2 ? 'picker_chosed' : ''"></icon>
                                </view>
                            </view>
                        </view>
                    </view>
                    <view class="menu flex" :class="sort == 3?'ac':''" @click="sortEvent(3)" v-if="countList.oneself == 1">
                        <view class="title">自取</view>
                    </view>
                    <view class="menu flex" :class="sort == 4?'ac':''" @click="sortEvent(4)" v-if="countList.car == 1">
                        <view class="title">开车</view>
                    </view>
                    <view class="menu flex" :class="sort == 5?'ac':''" @click="sortEvent(5)" v-if="countList.run == 1">
                        <view class="title">跑腿</view>	
                    </view>
                </view>
            </view>
        </view>
        <!-- #ifdef MP-WEIXIN -->
        <view class="box" :style='{height: navH+81 + "px"}'></view>
        <!-- #endif -->
        <!-- #ifdef MP-ALIPAY -->
        <view class="box" style='height: 81px'></view>
        <!-- #endif -->
        <block v-if="!isEmpty">
            <block v-if="sort==4">
                <view class="shop-list-item" @click="openGroupStore($event)" :data-id="item.store_id" :data-time="item.finish_time" v-for="(item,index) in shopInfoList" :key="index">
                    <view class="shop-info-left">
                        <image class="shop-info-img" :src="item.icon_url"></image>
                    </view>
                    <view class="shop-info-detail">
                        <view class="shop-info-detail-name ellipsis" v-if="item.shop_name">{{item.shop_name}}</view>
                        <view class="shop-info-detail-middle" v-if="item.finish_time">
                            <text class="shop-info-detail-sales">当前班次：{{item.finish_time}}</text>
                        </view>
                        <view class="shop-info-detail-middle">
                             <block v-if="item.wait_class.length>0">
                                <view v-for="(item,index) in item.wait_class" :key="index" class="shop-info-detail-sales" :class=" idx == 0?'t1':''">剩余班次：{{item}}</view>
                            </block>
                        </view>
                        <!-- <button @click="activeEvent(item.store_id)" class="btn">立即上车</button> -->
                    </view>
                </view>
            </block>
            <block v-else>
                <view v-for="(item, index) in shopInfoList" :data-storeId='item.id' :key="index" class="shop-list-item">
                    <view class="shop-info-left" @click='openStore($event)' :data-storeid="item.id">
                        <block v-if='item.disable && item.reserve_status != 1'>
                            <view class='close'>  </view>
                        </block>
                        <block  v-if="item.type==1">
                            <view class='big_brand'></view>
                        </block>
                        <block v-if="item.new_store == 1">
                            <view class='new_store'></view>
                        </block>
                        <image class="shop-info-img" :src="item.shop_img"></image>
                    </view>
                    <view class="shop-info-detail">
                        <view  class="shop-info-top" @click='openStore($event)' :data-storeid="item.id">
                             <view class="shop-info-detail-name ellipsis">
                                {{item.shop_name}}
                            </view>
                            <view class="shop-info-detail-middle" v-if=" item.reserve_status == 1 && item.disable != 0 ">
                                <view class="reser_icon">接受预定中</view>
                            </view>
                            <view class="shop-info-detail-middle">
                                <view class="shop-info-detail-sales flex">
                                    <view class="flex store_score">
                                        <block v-if="item.star>0">
                                            <icon class="star_icon star_yellow"></icon>
                                            <text class="yellow_text">{{item.star}}</text>
                                        </block>
                                        <block v-else>
                                            <icon class="star_icon star_gray"></icon>
                                            <text class="light_text">暂无评分</text>
                                        </block>
                                    </view>
                                    <text  v-if="item.month_order">月售{{item.month_order}}</text>
                                </view>
                                <view class="shop-info-detail-sales">
                                    <image class="distribution_icon_1" v-if="item.distribution_type == 1" src="http://img1.birdback.org/a/88/91/88917015ffca21c78a2c6aca842a120e.png"></image>
                                    <block v-if='item.icon_tag_url != ""'>
                                        <image class="icon-tag" :src="item.icon_tag_url"></image>
                                    </block>
                                </view>
                            </view>
                            <view class="shop-info-detail-middle">
                                <view class="shop-info-detail-other">
                                    <text v-if="item.start_send_price">起送 ￥{{item.start_send_price}}</text>
                                    <view class="slide_text" v-if="item.start_send_price && item.send_price">|</view>
                                    <text v-if="item.send_price">配送 ￥{{item.send_price}}</text>
                                </view>
                            </view>
                        </view> 
                        <view class="shop-tags" :class=" item.arrowOpen ? 'arrowDown':'arrowUp' " :data-storeId="item.id" @click='openDiscount($event)'> 
                            <view class="text_list">
                                <block v-for='(item,index) in item.arrAll' :key='item'>
                                    <view class='sales_content' :class='index > 3 && item.arrowOpen ? "hide" : ""'>{{item}}</view>
                                </block>
                            </view>
                            <view class="arrow" v-if='item.arrAll.length>3'></view>
                        </view>
                    </view>
                </view>
            </block>
            <view class="no-more" v-if="noMore">更多商家接入中，敬请期待！</view>
        </block>
        <block v-else>
            <view class='empty' @click="">
                <view class='img'></view>
                <text>更多商家接入中，敬请期待</text>
            </view>
        </block>
    </view>
</template>

<script>
    import uniFly from 'unifly';
	import request from '../../../common/request.js';
	import $api_base from '../../../api/api_base.js';
	import topNav from '@/template/topnav/index.vue';
	import event from '../../../common/event.js';
	export default {
		components: { topNav },
		data() {
			return {
				shopInfoList: [],
                menuId: 0,
                schoolId: 0,
                pn: 1,
                pc: 30,
                sort: 1,
                navH: 0,
                n:0,
                title: "同学快跑",
                noMore: false,
                selectSort: false,
                countList:'',
                pickerSelect: 1,
                isEmpty:false
			}
		},
		onLoad: function (options) {
			this.navH	  = getApp().globalData.navHeight;
			this.n		  = getApp().globalData.n;
			this.schoolId = getApp().globalData.schoolInfo.id;
            this.countList= getApp().globalData.countList;
            this.menuId   = options.menuId;
			this.loadStore(false);
		},
        methods: {
            inputSearch: function () {
                uni.navigateTo({url: '/pagesOther/search/index?menuId=' + this.menuId});
            },
            openStore: function (e) {
                var storeId = e.currentTarget.dataset.storeid;
               
              
                getApp().globalData.scene = null;
                if(this.sort == 3){
                    uni.navigateTo({
                      url: '/pages/goods/goods?storeId=' + storeId + '&sid=oneself',
                    })
                }else{
                    uni.navigateTo({
                      url: '/pages/goods/goods?storeId=' + storeId + '&sid=index',
                    })
                }
            },
            openGroupStore: function (e) {
                var storeId = e.currentTarget.dataset.id;
                var finishTime = e.currentTarget.dataset.time;
                uni.navigateTo({
                    url: '/pages/goods/goods?storeId=' + storeId + '&finishTime=' + finishTime +'&sid=group',
                })
            },
            openDiscount: function (e) {
              var storeId = e.currentTarget.dataset.storeid;
              this.shopInfoList.find(item => {
                if (item.id == storeId) {
                  item.arrowOpen = !item.arrowOpen;
                }
              })
              const that = this;
              that.shopInfoList = [...that.shopInfoList];
            },
            sortEvent: function(n) {
                this.pn = 1
            	if (n == 0) {
            		if (this.sort > 2) {
            			this.sort = this.pickerSelect; 
            		} else {
            			this.selectSort = !this.selectSort;
            			return;
            		}
                    this.loadStore(false);
            	} else if (n <= 2) {
            		this.selectSort = !this.selectSort;
            		this.sort = n;
            		this.pickerSelect = n;
                    this.loadStore(false);
            	} else {
                    this.selectSort = false;
            		this.sort = n;
            	}
                if(this.sort == 3){
                    this.loadOneselfList();
                }
                if(this.sort == 4){
                    this.loadGroupList();
                }
                if(this.sort == 5){
                    this.loadStore();
                }
            },
			openSelect: function() {
				this.selectSort = !this.selectSort;
			},
            loadGroupList: function (isAppend) {
                var schoolId = this.schoolId;
                var self  = this;
                this.navH = getApp().globalData.navHeight;
                this.n    = getApp().globalData.n;
                this.leftNav  = getApp().globalData.windowWidth/2;
                $api_base.post($api_base.getGroupList,{school_id: schoolId}).then(function(e){
                    let data = e.data;
                    if (data.ok == 1) {
                        self.isEmpty = data.groupList.length > 0 ? false : true;
                        self.shopInfoList = data.groupList;
                        uni.pageScrollTo({
                            scrollTop: 0,
                            duration: 0
                        }); 
                    }
                });
            },
             loadOneselfList: function (isAppend) {
                var pn = this.pn;
                var where = new Object();
                var self = this;
                where.pn = pn;
                where.school_id = this.schoolId;
                $api_base.post($api_base.getOneselfList,where).then(function(res) {
                    let data = res.data;
                    if (data.ok == 1) {
                        var isEmpty = data.list.length > 0 ? false : true;
                        self.isEmpty = isEmpty;
                        if (!isEmpty){
                          let source1 = { arrowOpen: true };
                          data.list.forEach(function (v) {
                            let arrAll = [];
                            Object.assign(v, source1);
                            v.active_list.forEach(function (t) {
                              let arr = [];
                              arr = t.text.split(';');
                              let source2 = { text: arr };
                              Object.assign(t, source2);
                              arr.forEach((item) => {
                                arrAll.push(item);
                              });
                            })
                            let source3 = { arrAll : arrAll};
                            Object.assign(v, source3);
                          })
                          
                        }
                        if (isAppend) {
                            self.shopInfoList = [...self.shopInfoList, ...data.list];
                        } else {
                            self.shopInfoList = data.list;
                            uni.pageScrollTo({
                                scrollTop: 0,
                                duration: 0
                            });
                        }
                    }
                });
            },
            loadStore: function (isAppend) {
                var schoolId    = this.schoolId;
                var menuId      = this.menuId;
                var sort        = this.sort;
                var pn          = this.pn;
                var where       = new Object();
                var self        = this;
                this.selectSort = false
                where.pn        = pn;
                where.school_id = schoolId;
                where.menu_id   = this.sort == 5 ? 10 : menuId;
                where.sort      = sort;
                $api_base.post($api_base.storeList,where).then(function(res) {
                    let data = res.data;
                    if (data.ok == 1) {
                        var isEmpty = data.list.length > 0 ? false : true;
                        self.isEmpty= isEmpty;
                        if (!isEmpty) {
                          let source1 = { arrowOpen: true };
                          data.list.forEach(function (v) {
                            let arrAll = [];
                            Object.assign(v, source1);
                            v.active_list.forEach(function (t) {
                                let arr = [];
                                arr = t.text.split(';');
                                let source2 = { text: arr };
                                Object.assign(t, source2);
                                arr.forEach((item) => {
                                    arrAll.push(item);
                                });
                            })
                            let source3 = { arrAll: arrAll };
                            Object.assign(v, source3);
                          })
                        }
                        if (isAppend) {
                            self.shopInfoList = [...self.shopInfoList, ...data.list];
                        } else {
                            self.shopInfoList = data.list;
                            uni.pageScrollTo({
                                scrollTop: 0,
                                duration: 0
                            });
                        }
                    }
                });
            }
        },
        onPullDownRefresh: function () {
            if (this.shopInfoList.length > 0) {
                this.pc = 1;
                this.loadStore(false);
            }
            uni.stopPullDownRefresh();
        },
        /**
         * 页面上拉触底事件的处理函数
         */
        onReachBottom: function () {
            var pn = this.pn;
            var pc = this.pc;
            var count = this.shopInfoList.length;
            if (pn * pc <= count) {
                this.pn = pn + 1;
                if(this.sort<3)
                    this.loadStore(true);
                else if(this.sort == 3)
                    this.loadOneselfList(true)
                else if(this.sort == 4)
                    this.loadGroupList(true)
                else if(this.sort == 5)
                    this.loadStore(true)
            } else {
              this.noMore = true;
            }
        }
    }
</script>
<style>
  page {
  background-color: #fff;
  }
</style>
<style lang="scss" scoped>
    @import '../index.scss';
</style>
